<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>个人中心</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #F3EFEE;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .login {height:240px;background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);/*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/position: relative;}
      	.login .personal_logo {width: 4rem;height: 4rem;border-radius: 50%;margin: 0 auto 9px;/*position: absolute; top: 60px; left: 20px;*/}
      		.login .userinfo {position: absolute; top: 60px;text-align: center; left: 0; right: 0;}
      		.login .userinfo .title {font-size: 0.8rem; color: #fff;}

      		/* 设置条目 */
      		.item {height: 3rem;line-height: 3rem;padding-left: 0.7rem;background-color: #fff;}
      		.item_ico {float: left;width: 2.3rem;padding: 0.7rem 0.7rem 0.7rem 0;}
      		.item_arrow {float: right;width: 1.5rem;padding: 1rem 0.7rem 1rem 0;}
      		.item span {font-size: 0.7rem;}
          .yzm {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
          }
          .passwore_content_i {
            text-align: left;
            font-size: 1rem;
          }
          .phone_content {
            height: auto;
            padding-bottom: 1rem;
          }
          .aui-toast-content{
              color: #fff;
            }
      </style>
  </head>
  <body>
<div id="app" >

<div class="user_nav_line"></div>
  <div class="aui-refresh-content phone_content">
    <div style="margin-left:0.5rem;">更换当前手机号</div>
    <div class="password_content" style="margin:0 0.5rem;">
      <i class="aui-iconfont aui-icon-mobile passwore_content_i"></i>
      <input type="text" name="" placeholder="请输入新手机号" class="pass_place" v-model="newPhone">
    </div>



    <button type="button" name="button" class="user_set_btn_one" @click="gaiban()" style="border-radius:1rem;">更换手机号</button>
</div>

  <div>


</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/aui-toast.js"></script>
  <script type="text/javascript">

      function openWinInfo(type){
        api.openWin({
            name: 'type',
            url: './userInfo.html',
            pageParam: {
                name: 'test'
            }
        });

      }


      apiready = function(){
      var toast = new auiToast({})
        setRefresh()
        var app = new Vue({
          el:"#app",
          data:{
            newPhone: '',

          },
          methods:{

            gaiban:function() {
              var $_this = this;
              api.ajax({
                 url: window.Url.Freestore_setInfo,
                 method: 'post',
                 data: {
                   values: {

                     kefu_tel:  $_this.newPhone,
                     token: $api.getStorage('token')

                   }
                 }
               }, function(ret, err) {
                   if (ret) {
                       if(ret.re == 1) {
                          toast.success({
                            title:ret.info,
                            duration:1000
                          })
                       }
                       setTimeout(function(){
                         api.closeToWin({
                             name: 'storeTheData'
                         });
                          api.execScript({
                              name: 'storeTheData',
                              // frameName: 'type',
                              script: 'window.location.reload();'
                          });
                          api.execScript({
                              name: 'shopCenter',
                              // frameName: 'type',
                              script: 'window.location.reload();'
                          });

                       },1000)


                   } else {
                       api.alert({ msg: JSON.stringify(err) });
                   }
               })
            }
          }
        })

      };


      //刷新
      function setRefresh() {
          var pullRefresh = new auiPullToRefresh({
              container: document.querySelector('.aui-refresh-content'),
              triggerDistance: 100
          }, function(ret) {

              if (ret.status == "success") {
                  setTimeout(function() {
                      pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                  }, 1500)
              }
          })
      }

  </script>
  </html>
